<template>
  <div id="PictureManage" class="container-fluid" style="position: relative">
    <div class="space" style="margin-top: 5vh"></div>
    <div class="input-group" style="width: 30%">
      <input
        v-model="searchText"
        type="text"
        class="form-control"
        @keyup.enter="handleSreach(1)"
        placeholder="请输入查询参数"
      />
      <div class="input-group-append">
        <button type="button" class="btn input-group-text" @click="handleSreach(1)">
          <i class="bi bi-search"></i>
        </button>
      </div>
    </div>

    <table class="table table-striped table-hover table-light align-middle" style="margin-top: 5vh">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">id</th>
          <th scope="col">名称</th>
          <th scope="col">图片</th>
          <th scope="col">简介</th>
          <th scope="col">分类</th>
          <th scope="col">标签</th>
          <th scope="col">图片信息</th>
          <th scope="col">上传用户id</th>
          <th scope="col">创建时间</th>
          <th scope="col">编辑时间</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(picture, index) in pictureList" :key="picture.id">
          <th scope="row">{{ index }}</th>
          <td>{{ picture.id }}</td>
          <td>{{ picture.pictureName }}</td>
          <td class="align-middle">
            <img
              :src="picture.url"
              :title="picture.pictureName"
              style="width: 6vh; vertical-align: middle"
            />
          </td>
          <td>{{ picture.introduction ?? '还没有简介呢，快来添加吧~' }}</td>

          <td>
            <button type="button" class="btn btn-success" v-if="picture.category">
              <span class="badge badge-light" style="font-size: 15px">{{ picture.category }}</span>
            </button>
            {{ picture.category ? '' : '快来添加分类吧' }}
          </td>
          <td>
            <button
              v-for="tag in JSON.parse(picture.tags)"
              :key="tag"
              type="button"
              class="btn btn-outline-primary m-1"
            >
              <span class="badge badge-primary" style="font-size: 15px">{{ tag }}</span>
            </button>
            {{ picture.tags ? '' : '快来添加标签吧' }}
          </td>
          <td class="align-middle">
            <div class="picinfo">
              <div class="pictureFormat text-nowrap">{{ '格式: ' + picture.picFormat }}</div>
              <div class="pictureFormat text-nowrap">{{ '宽度: ' + picture.picWidth }}</div>
              <div class="pictureFormat text-nowrap">{{ '高度: ' + picture.picHeight }}</div>
              <div class="pictureFormat text-nowrap">{{ '宽高比: ' + picture.picScale }}</div>
              <div class="pictureFormat text-nowrap">
                {{ '图片大小: ' + (picture.picSize / 1024).toFixed(2) + 'KB' }}
              </div>
            </div>
          </td>
          <td>{{ picture.userId }}</td>
          <td>{{ picture.createTime }}</td>
          <td>{{ picture.editTime }}</td>
          <td class="align-middle">
            <div class="d-flex">
              <button type="button" class="btn btn-outline-danger">删除</button>
              <button type="button" class="btn btn-primary">更新</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <nav aria-label="Page navigation example" class="text-center d-flex justify-content-center">
      <ul class="pagination">
        <li class="page-item" @click="handleClickPage(-2)">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li
          :class="'page-item ' + page.isActive"
          v-for="page in pages"
          :key="page.number"
          @click="handleClickPage(page.number)"
        >
          <a class="page-link" href="#">{{ page.number }}</a>
        </li>
        <li class="page-item" @click="handleClickPage(-1)">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { format } from 'date-fns'
import { getPicturePages } from '@/api/picture.js'
import { message } from 'ant-design-vue'

const current = ref(1)
const pictureName = ref('')
const introduction = ref('')
const sortField = ref('create_time')
const sortOrder = ref('descend')
const category = ref('')
const tags = ref([])
const picWidth = ref('')
const picHeight = ref('')
const picFormat = ref('')
const searchText = ref('')
const userId = ref('') //图片上传者id
const id = ref('')
const pictureList = ref([]) //存放查询结果
const total = ref(0)
const pages = ref([])

const pagination = computed(() => {
  return {
    id: id.value,
    current: current.value,
    pageSize: 10,
    pictureName: pictureName.value,
    sortField: sortField.value,
    sortOrder: sortOrder.value,
    introduction: introduction.value,
    category: category.value,
    tags: tags.value,
    picWidth: picWidth.value,
    picHeight: picHeight.value,
    picFormat: picFormat.value,
    searchText: searchText.value,
    userId: userId.value,
  }
})

const handleClickPage = (param) => {
  let currentPage = current.value
  let maxPageNum = parseInt(Math.ceil(total.value / 10))
  console.log('----------------------------------------------------------')
  console.log('param:', param)
  //这里为了方便直接简单让-2表示前一页，-1表示后一页
  if (param == -2) currentPage = currentPage - 1
  else if (param == -1) currentPage = currentPage + 1
  else currentPage = param

  if (currentPage >= 1 && currentPage <= maxPageNum) {
    current.value = currentPage

    console.log('pagination:', pagination.value)
    pull_page(pagination.value)
  }
}

const handleSreach = (param) => {
  handleClickPage(param)
  searchText.value = ''
}

const udpate_pages = () => {
  let new_pages = []
  let maxPageNum = parseInt(Math.ceil(total.value / 10))
  let currentPage = current.value
  for (let i = currentPage - 2; i <= currentPage + 2; i++) {
    if (i >= 1 && i <= maxPageNum) {
      new_pages.push({
        number: i,
        isActive: i === currentPage ? 'active' : '',
      })
    }
  }
  pages.value = new_pages
}

//传入参数即可
const pull_page = async (param) => {
  console.log('执行了111')
  try {
    const res = await getPicturePages(param)
    if (res.data.code === 0 && res.data.data) {
      const data = res.data.data
      total.value = data.total
      pictureList.value = data.records
      console.log('pictureList', pictureList.value)
      if (pictureList.value.length === 0) {
        message.error('无搜索结果')
      }
      udpate_pages()
    } else {
      message.error(res.data.message)
    }
  } catch (e) {
    message.error(e.message)
  }
}

pull_page(pagination.value)
</script>

<style scoped>
#PictureManage table td,
#PictureManage table th {
  vertical-align: middle;
}

/*#userManage table img {
  vertical-align: middle;
}*/

#PictureManage .btn {
  margin: 0;
}
#PictureManage .picinfo {
  border: 0.2rem outset pink;
  outline: 0.2rem solid khaki;
  box-shadow: 0 0 0 1rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}
</style>
